<script lang="ts" setup>
import { Search } from 'lucide-vue-next';
import { ref } from 'vue';

const { collapsed } = withDefaults(defineProps<{
	collapsed: boolean;
}>(), {
	collapsed: false,
});

const focused = defineModel<boolean>('focused');
const keyword = ref('');
const router = useRouter();

const handleSubmit = async () => {
	await router.push({ name: 'search', query: { keyword: keyword.value } });
};
</script>

<template>
	<form @submit.prevent="handleSubmit">
		<div
			class="relative w-fit max-w-sm items-center"
			@click="focused = true"
		>
			<Input
				id="search"
				v-model="keyword"
				v-model:focused="focused"
				:class="['pl-10 rounded-full w-[15rem]', collapsed ? 'placeholder:opacity-0 p-0 w-[2.5rem] transition-all' : '']"
				placeholder="搜索"
				type="text"
			/>
			<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
				<Search class="size-6 text-muted-foreground" />
			</span>
		</div>
	</form>
</template>

<style lang="postcss" scoped>
/* 在宽度小于1024px的窗口才会生效 */
/* 用于伸缩搜索输入框 */
@media (max-width: 1023px) {
  div > input:focus {
    width: 160px;
    padding-left: 2.5rem;
    @apply text-sm !important;
  }

  div > input:focus::placeholder {
    opacity: 1;
  }

  div > input:not(:placeholder-shown) {
    font-size: 0;
  }
}
</style>
